<script setup lang="ts">
import { Sun, Moon, Monitor } from 'lucide-vue-next'
import { useTheme } from '@/composables/useTheme'
import { ref } from 'vue'

const {
  theme,
  /* themeMode - 未直接使用，注释避免 TS6133 */
  systemTheme,
  toggleTheme,
  toggleThemeMode,
  setManualTheme,
  isDark,
  isAuto,
  isManual
} = useTheme()

const showDropdown = ref(false)

/**
 * 切换下拉菜单显示状态
 */
const toggleDropdown = () => {
  showDropdown.value = !showDropdown.value
}

/**
 * 关闭下拉菜单
 */
const closeDropdown = () => {
  showDropdown.value = false
}

/**
 * 设置手动主题
 */
const handleSetManualTheme = (newTheme: 'light' | 'dark') => {
  setManualTheme(newTheme)
  closeDropdown()
}

/**
 * 切换到自动模式
 */
const handleToggleAuto = () => {
  toggleThemeMode()
  closeDropdown()
}

/**
 * 快速切换主题（仅在手动模式下）
 */
const handleQuickToggle = () => {
  if (isManual.value) {
    toggleTheme()
  } else {
    toggleDropdown()
  }
}
</script>

<template>
  <div class="relative">
    <!-- 主按钮 -->
    <button
      :class="[
        'relative p-2 rounded-full transition-all duration-300 group',
        'hover:scale-110 active:scale-95',
        'bg-gray-200 dark:bg-gray-800',
        'border border-gray-300 dark:border-gray-600',
        'hover:bg-gray-300 dark:hover:bg-gray-700',
        'focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2',
        'dark:focus:ring-offset-gray-900'
      ]"
      :title="
        isAuto
          ? `系统主题: ${systemTheme === 'dark' ? '暗色' : '亮色'}`
          : isDark
            ? '切换到亮色主题'
            : '切换到暗色主题'
      "
      @click="handleQuickToggle"
    >
      <!-- 图标容器 -->
      <div class="relative w-5 h-5">
        <!-- 自动模式 - 显示系统图标 -->
        <Monitor
          v-if="isAuto"
          :class="['w-5 h-5 transition-all duration-300', 'text-purple-500']"
        />

        <!-- 手动模式 - 显示对应主题图标 -->
        <template v-else>
          <!-- 太阳图标 (亮色主题) -->
          <Sun
            :class="[
              'absolute inset-0 w-5 h-5 transition-all duration-300',
              'text-yellow-500',
              isDark ? 'opacity-0 rotate-90 scale-0' : 'opacity-100 rotate-0 scale-100'
            ]"
          />

          <!-- 月亮图标 (暗色主题) -->
          <Moon
            :class="[
              'absolute inset-0 w-5 h-5 transition-all duration-300',
              'text-blue-400',
              isDark ? 'opacity-100 rotate-0 scale-100' : 'opacity-0 -rotate-90 scale-0'
            ]"
          />
        </template>
      </div>

      <!-- 发光效果 -->
      <div
        :class="[
          'absolute inset-0 rounded-full transition-all duration-300 opacity-0 group-hover:opacity-100',
          isAuto
            ? 'bg-purple-400/20 shadow-lg shadow-purple-400/25'
            : isDark
              ? 'bg-blue-400/20 shadow-lg shadow-blue-400/25'
              : 'bg-yellow-500/20 shadow-lg shadow-yellow-500/25'
        ]"
      />

      <!-- 设置指示器（自动模式下显示） -->
      <div
        v-if="isAuto"
        class="absolute -top-1 -right-1 w-3 h-3 bg-purple-500 rounded-full border-2 border-white dark:border-gray-800 animate-pulse"
      />
    </button>

    <!-- 下拉菜单 -->
    <div
      v-if="showDropdown"
      class="absolute right-0 top-full mt-2 w-48 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 z-50 overflow-hidden"
      @click.stop
    >
      <!-- 当前状态显示 -->
      <div class="px-4 py-3 border-b border-gray-200 dark:border-gray-700">
        <div class="text-sm font-medium text-gray-900 dark:text-white">主题设置</div>
        <div class="text-xs text-gray-500 dark:text-gray-400 mt-1">
          <span v-if="isAuto"> 自动跟随系统 ({{ systemTheme === 'dark' ? '暗色' : '亮色' }}) </span>
          <span v-else> 手动模式 ({{ theme === 'dark' ? '暗色' : '亮色' }}) </span>
        </div>
      </div>

      <!-- 自动跟随选项 -->
      <button
        :class="[
          'w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors',
          'flex items-center space-x-3',
          isAuto ? 'bg-purple-50 dark:bg-purple-900/20' : ''
        ]"
        @click="handleToggleAuto"
      >
        <Monitor class="w-4 h-4 text-purple-500" />
        <div class="flex-1">
          <div class="text-sm font-medium text-gray-900 dark:text-white">自动跟随系统</div>
          <div class="text-xs text-gray-500 dark:text-gray-400">根据系统设置自动切换</div>
        </div>
        <div
          v-if="isAuto"
          class="w-2 h-2 bg-purple-500 rounded-full"
        />
      </button>

      <!-- 分割线（仅在非自动模式下显示） -->
      <div
        v-if="!isAuto"
        class="border-t border-gray-200 dark:border-gray-700"
      />

      <!-- 手动主题选项（仅在非自动模式下显示） -->
      <div
        v-if="!isAuto"
        class="py-1"
      >
        <!-- 亮色主题 -->
        <button
          :class="[
            'w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors',
            'flex items-center space-x-3',
            isManual && theme === 'light' ? 'bg-yellow-50 dark:bg-yellow-900/20' : ''
          ]"
          @click="handleSetManualTheme('light')"
        >
          <Sun class="w-4 h-4 text-yellow-500" />
          <div class="flex-1">
            <div class="text-sm font-medium text-gray-900 dark:text-white">亮色主题</div>
            <div class="text-xs text-gray-500 dark:text-gray-400">明亮清新的界面风格</div>
          </div>
          <div
            v-if="isManual && theme === 'light'"
            class="w-2 h-2 bg-yellow-500 rounded-full"
          />
        </button>

        <!-- 暗色主题 -->
        <button
          :class="[
            'w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors',
            'flex items-center space-x-3',
            isManual && theme === 'dark' ? 'bg-blue-50 dark:bg-blue-900/20' : ''
          ]"
          @click="handleSetManualTheme('dark')"
        >
          <Moon class="w-4 h-4 text-blue-400" />
          <div class="flex-1">
            <div class="text-sm font-medium text-gray-900 dark:text-white">暗色主题</div>
            <div class="text-xs text-gray-500 dark:text-gray-400">护眼的深色界面风格</div>
          </div>
          <div
            v-if="isManual && theme === 'dark'"
            class="w-2 h-2 bg-blue-400 rounded-full"
          />
        </button>
      </div>
    </div>

    <!-- 点击外部关闭下拉菜单 -->
    <div
      v-if="showDropdown"
      class="fixed inset-0 z-40"
      @click="closeDropdown"
    />
  </div>
</template>

<style scoped>
/* 额外的动画效果 */
@keyframes theme-switch {
  0% {
    transform: scale(1) rotate(0deg);
  }
  50% {
    transform: scale(1.1) rotate(180deg);
  }
  100% {
    transform: scale(1) rotate(360deg);
  }
}

.theme-switch-animation {
  animation: theme-switch 0.6s ease-in-out;
}
</style>
